<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(#91ebd7, #c185e4);
        }

        ul {
            position: relative;
            display: flex;
            height: 200px;

        }

        ul::after {
            content: '';
        }

        li {
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            margin: 0 10px;

        }

        li:nth-child(1) {
            background-color: red;
            animation: love1 3s .8s infinite;
        }

        li:nth-child(2) {
            background-color: darkcyan;
            animation: love2 3s 0.6s infinite;

        }

        li:nth-child(3) {
            background-color: darkgoldenrod;

            animation: love3 3s 0.4s infinite;

        }

        li:nth-child(4) {
            background-color: darkorchid;
            animation: love4 3s 0.2s infinite;

        }

        li:nth-child(5) {
            background-color: darkorange;
            animation: love5 3s 0s infinite;

        }

        li:nth-child(6) {
            background-color: darkorchid;
            animation: love4 3s .2s infinite;

        }

        li:nth-child(7) {
            background-color: darkgoldenrod;
            animation: love3 3s .4s infinite;

        }

        li:nth-child(8) {
            background-color: darkcyan;
            animation: love2 3s .6s infinite;

        }

        li:nth-child(9) {
            background-color: red;
            animation: love1 3s .8s infinite;

        }

        @keyframes love1 {

            30%,
            50% {
                height: 60px;
                transform: translateY(-30px);

            }

            70%,
            100% {
                height: 20px;
                transform: translateY(0)
            }
        }


        @keyframes love1 {

            30%,
            50% {
                height: 60px;
                transform: translateY(-30px);

            }

            70%,
            100% {
                height: 20px;
                transform: translateX(0)
            }
        }

        @keyframes love2 {

            30%,
            50% {
                height: 125px;
                transform: translateY(-60px);

            }

            70%,
            100% {
                height: 20px;
                transform: translateY(0)
            }
        }

        @keyframes love3 {

            30%,
            50% {
                height: 160px;
                transform: translateY(-75px);

            }

            70%,
            100% {
                height: 20px;
                transform: translateY(0)
            }
        }

        @keyframes love4 {

            30%,
            50% {
                height: 180px;
                transform: translateY(-60px);

            }

            70%,
            100% {
                height: 20px;
                transform: translateY(0)
            }
        }

        @keyframes love5 {

            30%,
            50% {
                height: 200px;
                transform: translateY(-45px);

            }

            70%,
            100% {
                height: 20px;
                transform: translateY(0)
            }
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>